import { Text, View, StyleSheet, TouchableOpacity, Image, TextInput, ActivityIndicator } from 'react-native'
import React, { useState, useRef, useEffect } from 'react'
import { connect } from 'react-redux'
import { pTx } from "../../utils/dimensions"
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import Realm from "realm"
import IconFont from '@pingtou/rn-vant-icons'
import httpApi from "../../api"
import ShadowCard from "../../utils/shadowCard"
import LinearGradient from 'react-native-linear-gradient';
import Avatar from "../../components/avatar"

const FriendTransferInApp = (props) => {
    const realm = useRealm();
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];
    const [amount, setAmount] = useState("")
    const [tokenType, setTokenType] = useState(1)
    const [loading, setLoading] = useState(false)
    const [tokenTypeList] = useState([{
        name: "USDT",
        image: require('../../assets/image/USDT.png')
    }, {
        name: "Tweet",
        image: require('../../assets/logo.png')
    }])


    const sendFriendTransferInApp = async () => {
        if (!amount) return
        try {
            setLoading(true)
            const res = await httpApi.sendFriendRedPacketInApp({
                id: props.route.params.F,
                tokenType: tokenType,
                amount: amount,
            })
            if (res.code == 20) {
                var timestamp = Date.parse(new Date()) / 1000
                const realmItem = {
                    F: props.route.params.F,
                    M: tokenType + " " + amount,
                    MT: 7,
                    S: -1,
                    T: timestamp,
                    _id: new Realm.BSON.UUID(),
                    UserId: userInfo.Id,
                }
                realm.write(() => {
                    realm.create(schemaName.FriendMsgLis, realmItem, true);
                })
                props.navigation.goBack()
            }

        } catch (error) {

        }
        setLoading(false)
    }
    return (
        <>
            <View style={styles.page}>
                <View style={styles.row}>
                    <Text style={styles.styleText}>转帐代币</Text>
                    <TouchableOpacity style={styles.cell} onPress={() => setTokenType(tokenType ? 0 : 1)}>
                        <View style={styles.tokenType}>
                            <Image style={[styles.tokenTypeImage]} source={tokenTypeList[tokenType].image}></Image>
                            <Text style={[styles.tokenTypeName]}>{tokenTypeList[tokenType].name}</Text>
                        </View>
                        <IconFont name="arrow" style={styles.IconFont} />
                    </TouchableOpacity>
                </View>
                <View style={styles.row}>
                    <Text style={styles.styleText}>收款人</Text>
                    <View style={styles.cell}>
                        <View style={styles.user}>
                            <Avatar style={styles.ProfilePhoto} source={{ uri: props.route.params.ProfilePhoto }} />
                            <View style={styles.info}>
                                <Text style={styles.tokenTypeName}>{props.route.params.R}</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.row}>
                    <View style={styles.tokenType}>
                        <Text style={styles.styleText}>转账数量</Text>
                        <View style={[styles.tokenType]}>
                            <Text style={styles.styleText}><Text style={{ color: "#AFB5BD" }}>余额</Text>：
                                {
                                    tokenType ? userInfo.Tweet + ' Tweet' : userInfo.USDT + ' USDT'
                                }
                            </Text>
                            <Image style={[styles.footImage]} source={require('../../assets/image/icon33.png')}></Image>
                        </View>
                    </View>
                    <View style={styles.cellTextInput}>
                        <TextInput
                            value={amount}
                            keyboardType="numeric"
                            style={[styles.amount]}
                            placeholder="请输入转帐数量"
                            onChangeText={value => setAmount(Number(value).toString())}
                        />
                        <Text style={styles.all} onPress={() => setAmount(Number(tokenType ? userInfo.Tweet : userInfo.USDT).toString())}>全部</Text>
                    </View>
                </View>
                <View style={styles.footerButton}>
                    <ShadowCard style={styles.button}>
                        <LinearGradient
                            colors={['rgba(51, 225, 144, 1)', 'rgba(68, 225, 240, 1)']}
                            start={{ x: 0.25, y: 0.25 }}
                            end={{ x: 0.75, y: 0.75 }}
                            style={[styles.linearGradient]}>
                            <TouchableOpacity disabled={loading} type="primary" style={[styles.button]} onPress={() => sendFriendTransferInApp()}>
                                <>
                                    {loading ? <ActivityIndicator /> : ""}
                                    <Text style={styles.ButtonText}>确认</Text>
                                </>
                            </TouchableOpacity>
                        </LinearGradient>
                    </ShadowCard>
                </View>
            </View>

        </>
    )
}

const mapStateToProps = (state) => state.app

const mapDispatchToProps = {
}


export default connect(mapStateToProps, mapDispatchToProps)(FriendTransferInApp)


const styles = StyleSheet.create({
    page: {
        flex: 1,
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(20),
    },
    row: {
        marginBottom: pTx(20),
    },
    styleText: {
        color: "#0A0C14",
        fontSize: pTx(12),
    },
    cell: {
        marginTop: pTx(8),
        paddingVertical: pTx(16),
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: pTx(12),
        paddingHorizontal: pTx(15),
        backgroundColor: "#F7F7F7",
        borderRadius: pTx(6),
    },
    cellTextInput: {
        marginTop: pTx(8),
        paddingVertical: pTx(3),
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: pTx(12),
        paddingHorizontal: pTx(15),
        backgroundColor: "#F7F7F7",
        borderRadius: pTx(6),
    },
    amount: {
        flex: 1,
        height: "auto",
        color: "#0A0C14",
        fontSize: pTx(16),
    },
    tokenType: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    tokenTypeImage: {
        marginRight: pTx(8),
        width: pTx(22),
        height: pTx(22),
        borderRadius: pTx(22),
        backgroundColor: "#fff"
    },
    tokenTypeName: {
        color: "#0A0C14",
        fontSize: pTx(16),
    },
    user: {
        flexDirection: 'row',
        alignItems: "center",
    },
    ProfilePhoto: {
        marginRight: pTx(8),
        width: pTx(53),
        height: pTx(53),
        borderRadius: pTx(4),
    },
    footImage: {
        marginLeft: pTx(4),
        width: pTx(12),
        height: pTx(12),
    },
    all: {
        color: "#06C161",
        fontSize: pTx(16),
    },

    footerButton: {
        paddingTop: pTx(40),
        paddingBottom: pTx(63),
        alignItems: "center"
    },
    linearGradient: {
        borderRadius: 10
    },
    button: {
        width: pTx(345),
        height: pTx(55),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
    },
    ButtonText: {
        color: "rgba(10, 12, 20, 1)",
        fontSize: pTx(14),
        fontWeight: 'bold'
    },
})